<template>
    <div class="loading" v-if="loading" :style="styleObj" :class="loadClass">
        <slot name="loadingIcon"></slot>
        <span>{{loadingText}}</span>
    </div>
</template>
<script>
export default {
    props:{
        loadingText:{
            type:String,
            default:"正在加载..."
        },
        loading:{
            type:Boolean,
            default:true
        },
        size:{
            type:String,
            default:"normal"
        },
        textColor:{
            type:String,
            default:"#fff"
        }
    },
    data(){
        return{
            styleObj:{
                color:this.textColor
            }
        }
    },
    computed:{
        loadClass(){
            return this.size=="normal"?"loading_normal":"loading_small"
        }
    }
}
</script>

<style lang="scss" scoped>
/* loading */
.loading{
    width: 100%;
    text-align: center;
}
.loading_normal{
    font-size: 16px;
    padding: 30px 0;
}
.loading_small{
	font-size: 14px;
	padding: 20px 0;
}
</style>
